<template>
  <div class="reservation-list">
    <el-table :data="reservationList" style="width: 100%">
      <el-table-column prop="id" label="预定ID" width="80" />
      <el-table-column prop="bookName" label="书籍名称" width="180" />
      <el-table-column prop="userName" label="预定用户" width="120" />
      <el-table-column prop="reservationNum" label="预定数量" width="100" />
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="还书时间" width="180" />
      <el-table-column prop="createTime" label="预定时间" width="180" />
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status === 0"
            type="success"
            size="small"
            @click="handleReview(scope.row, 1)"
          >
            通过
          </el-button>
          <el-button
            v-if="scope.row.status === 0"
            type="danger"
            size="small"
            @click="handleReview(scope.row, 2)"
          >
            拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import axios from 'axios'
import { getToken } from '@/utils/storage'

// 添加请求拦截器
axios.interceptors.request.use(
  config => {
    const token = getToken()
    if (token) {
      config.headers['token'] = token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

export default {
  name: 'BookReservationList',
  data() {
    return {
      reservationList: []
    }
  },
  methods: {
    getStatusType(status) {
      switch (status) {
        case 0:
          return 'warning'
        case 1:
          return 'success'
        case 2:
          return 'danger'
        default:
          return 'info'
      }
    },
    getStatusText(status) {
      switch (status) {
        case 0:
          return '待审核'
        case 1:
          return '已通过'
        case 2:
          return '已拒绝'
        default:
          return '未知'
      }
    },
    async fetchReservationList() {
      try {
        const response = await axios.get('/api/book-manage-sys-api/v1.0/bookReservation/list')
        if (response.data.code === 200) {
          this.reservationList = response.data.data
        } else {
          Message.error(response.data.msg || '获取预定列表失败')
        }
      } catch (error) {
        console.error('获取预定列表失败:', error)
        Message.error('获取预定列表失败')
      }
    },
    async handleReview(row, status) {
      try {
        const response = await axios.post('/api/book-manage-sys-api/v1.0/bookReservation/review', {
          id: row.id,
          status: status
        })
        if (response.data.code === 200) {
          Message.success('审核成功')
          this.fetchReservationList()
        } else {
          Message.error(response.data.msg || '审核失败')
        }
      } catch (error) {
        console.error('审核失败:', error)
        Message.error('审核失败')
      }
    }
  },
  mounted() {
    this.fetchReservationList()
  }
}
</script>

<style scoped>
.reservation-list {
  padding: 20px;
}
</style> 